import React from 'react'
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';
const { confirm } = Modal;
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom';
function Heart() {
    const nav = useNavigate()
    const showConfirm = () => {

        confirm({
            title: '是否确认退出?',
            icon: <ExclamationCircleFilled />,
            onOk() {
                console.log('OK');
                localStorage.removeItem('token')
                localStorage.removeItem('username')
                nav('/login')
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };
    const heart = useSelector(state => state.setUser)
    console.log(heart);
    return (
        <div onClick={() => { showConfirm() }}>
            <div style={{ display: 'flex', alignItems: 'center', position: 'fixed', top: '5px', right: 0 }}>
                <p>{heart.name}</p>
                <img style={{ width: 50 }} src={heart.pic} alt="" />
            </div>
        </div>
    )
}

export default React.memo(Heart)
